<template>
  <div id="app">
    <hello-world></hello-world>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld'
export default {
  name: 'App',
  components: {HelloWorld},
  data(){
    return{
      test: '这是测试数据'
    }
  }
}
</script>

<style scoped>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.hello {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: mymove 5s forwards;
  -moz-animation: mymove 5s forwards; /* Firefox */
  -webkit-animation: mymove 5s forwards; /* Safari and Chrome */
  -o-animation: mymove 5s forwards; /* Opera */
}

@keyframes mymove {
  0% {
    top: 0px;
    background: red;
    width: 100px;
  }
  100% {
    top: 200px;
    background: yellow;
    width: 300px;
  }
}

@-moz-keyframes mymove /* Firefox */ {
  0% {
    top: 0px;
    background: red;
    width: 100px;
  }
  100% {
    top: 200px;
    background: yellow;
    width: 300px;
  }
}

@-webkit-keyframes mymove /* Safari and Chrome */ {
  0% {
    top: 0px;
    background: red;
    width: 100px;
  }
  100% {
    top: 200px;
    background: yellow;
    width: 300px;
  }
}

@-o-keyframes mymove /* Opera */ {
  0% {
    top: 0px;
    background: red;
    width: 100px;
  }
  100% {
    top: 200px;
    background: yellow;
    width: 300px;
  }
}
</style>
